<template>
  <div id="companyAccountSetting" class="route-page">
    <a-card title="楼宇标签" class="card-with-title-page" size="small">
      <template #extra>
        <a-button
          v-permission="['taglibBuild', 'curd', 'add']"
          type="primary"
          @click="editTag()"
          >添加楼宇标签</a-button
        >
      </template>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="dataList"
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'status'">
            <a-switch
              v-permission="['taglibBuild', 'curd', 'status']"
              :checkedValue="1"
              :unCheckedValue="0"
              :checked="text"
              checked-children="开启"
              un-checked-children="关闭"
              @click="(checked) => handleStatusClick(record.id, checked)"
            />
          </template>
          <template v-if="column.key === 'action'">
            <a-button
              type="link"
              v-permission="['taglibBuild', 'curd', 'edit']"
              @click="editTag(text)"
              >编辑</a-button
            >
            <a-button
              type="link"
              v-permission="['taglibBuild', 'curd', 'delete']"
              danger
              @click="deleteTag(text)"
              >删除</a-button
            >
          </template>
        </template>
      </a-table>
    </a-card>
    <edit-tag
      @cancel="editTagClose"
      @success="editSuccess"
      :visible="editVisible"
      :id="currentId"
      title="楼宇标签"
      :requestUrl="{
        color: '/manage/taglib/build/color',
        save: '/manage/taglib/build',
        detail: '/manage/taglib/build/get',
      }"
    ></edit-tag>
  </div>
</template>

<script>
import EditTag from "../../../components/Tag/add.vue";
import { computed, defineComponent, ref, watch } from "vue";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
import utils from "../../../common/utils/utils";
export default defineComponent({
  name: "taglibBuild",
  components: { EditTag },
  setup() {
    /**
     * @description: 分页信息
     */
    const page = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: pageSize.value,
      showSizeChanger: true,
    }));

    /**
     * @description: 表格数据
     */
    const loading = ref(false);
    const dataList = ref([]);
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      pageSize.value = pager.pageSize;
    };

    watch([page, pageSize], () => {
      getTableData();
    });

    /**
     * @description: 新增编辑表单
     */
    const editVisible = ref(false);
    const currentId = ref(0);

    const editTag = (id) => {
      currentId.value = id || 0;
      editVisible.value = true;
    };

    const editTagClose = () => {
      editVisible.value = false;
    };

    const editSuccess = () => {
      editTagClose();
      getTableData();
    };

    /**
     * @description: 初始化
     */
    const init = () => {
      getTableData();
    };

    /**
     * @description: 获取表格数据
     */
    const getTableData = () => {
      loading.value = true;
      request.get("/org", "/manage/taglib/build", {
        page: page.value,
        pageSize: pageSize.value,
      })
        .then((res) => {
          dataList.value = res.list;
          total.value = Number(res.total);
        })
        .finally(() => {
          loading.value = false;
        });
    };

    /**
     * @description: 编辑账户状态
     * @param {Number} id
     * @param {Number} checked 开启/关闭
     */
    const handleStatusClick = (id, checked) => {
      request.put("/org", "/manage/taglib/build/status", {
        id,
        status: checked,
        needMsg: true,
      }).then((res) => {
        message.success(res.msg || "修改成功");
        getTableData();
      });
    };

    /**
     * @description: 删除标签
     * @param {Number} id
     */
    const deleteTag = (id) => {
      utils.modalConfirm({
        content: "确认要删除当前标签吗？",
        okType: "danger",
        centered: true,
        onOk: () => {
          request.del("/org", "/manage/taglib/build", { id, needMsg: true }).then(
            (res) => {
              message.success(res.msg || "删除成功");
              getTableData();
            }
          );
        },
      });
    };

    /**
     * @description: 楼宇对象转化为字符串
     * @param {Object} build
     */
    const buildNames = (build) => {
      let text = "";
      if (build && build.names) {
        for (let i in build.names) {
          text += build.names[i];
        }
      }
      return text;
    };

    init();

    return {
      columns,
      dataList,
      editVisible,
      currentId,
      editTag,
      editTagClose,
      editSuccess,
      loading,
      pagination,
      handleTableChange,
      handleStatusClick,
      deleteTag,
      buildNames,
    };
  },
});

const columns = [
  {
    title: "标签名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "标签描述",
    dataIndex: "desc",
    key: "desc",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
  },
];
</script>

<style lang="less" scoped></style>
